import React, { useState,useEffect } from "react";
import "../css/Cart.css";

export default function ShopCart() {
  let [check, setCheck] = useState(false); // 默认全选
  let [price, setPrice] = useState(0); // 总价格
  let [arr, setArr] = useState([
    {
      id: 2,
      img: "https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/164708/20/20875/95398/6086e7daE5d1ea589/2248e82326846870.jpg.webp",
      text: "兰叶源  轻奢莫兰迪真绒布绢假塑料白玫瑰浆果花把束艺卉餐桌花瓶摆件 浅蓝色 两套更优惠",
      price: 266,
      num: 1,
      flag: true,
    },
    {
      id: 17,
      img: "https://img30.360buyimg.com/jdcms/s300x300_jfs/t1/171768/27/7247/168130/608c2d15E3a224958/3df7428a2844e3e3.jpg.webp",
      text: "BOLON暴龙眼镜2021新款猫眼太阳镜杨幂同款男女个性潮墨镜BL5052 F10-灰色",
      price: 670,
      num: 1,
      flag: false,
    },
    {
      id: 23,
      img: "https://img10.360buyimg.com/jdcms/s300x300_jfs/t1/160379/14/19692/51432/607972a4E033dc1a5/062e66b3a0ece4a8.jpg.webp",
      text: "兰叶源  创意现代轻奢潮牌网红暴力熊大摆件家居软装饰品客厅卡通小号摆设 灰色(站)小号",
      price: 106,
      num: 1,
      flag: false,
    },
    {
      id: 4,
      img: "https://img0.baidu.com/it/u=2046438138,1125349947&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
      text: "兰叶源  创意现代轻奢潮牌网红暴力熊大摆件家居软装饰品客厅卡通小号摆设 灰色(站)小号",
      price: 999,
      num: 1,
      flag: false,
    },
    {
      id: 5,
      img: "https://img0.baidu.com/it/u=75230838,1834501316&fm=253&fmt=auto&app=120&f=JPEG?w=189&h=180",
      text: "兰叶源  创意现代轻奢潮牌网红暴力熊大摆件家居软装饰品客厅卡通小号摆设 灰色(站)小号",
      price: 1314,
      num: 1,
      flag: false,
    },
  ]);

  useEffect(()=>{
    let sum = 0;
    arr.map((item)=>{
      if(item.flag){
        sum+=item.num*item.price
      }
    })
    setPrice(sum);

    let res = arr.some((item)=>{
      if(!item.flag){ // 表示存在没有选中的商品
        return true
      }
    })
    if(res){
      setCheck(false)
    }else{
      setCheck(true)
    }

  },[arr])  // 监听数组，当数据发生改变时，他会实时改变并渲染列表的状态

  const changeNum = (index, type) => {
    let newArr = [...arr];
    if (newArr[index].num > 1 && type == "send") {
      newArr[index].num--;
      setArr(newArr);
    } else if (type == "add") {
      newArr[index].num++;
      setArr(newArr);
    }
  };

  const change = (index) => {
    console.log(index);
    let newArr = [...arr]; // 解构赋值
    newArr[index].flag = !newArr[index].flag;  //改变了新的数组，原数组不会改变
    setArr(newArr);
    // console.log(newArr)
    
  };
  const allChecked = (check) => {
    console.log(check.target.checked);
    setCheck(check.target.checked); // 全选状态
    const newArr = arr.map((item) => {
      return { ...item, flag: check.target.checked };
    });
    setArr(newArr);
    // console.log(newArr)
  };
  return (
    <div className="box">
      <ul>
        {arr.map((item, index) => {
          return (
            <li key={item.id}>
              <input
                type="checkbox"
                checked={item.flag}
                onChange={() => change(index)}
              />
              <img src={item.img} alt="" />
              <div>
                <p>{item.text}</p>
                <p>{item.text}</p>
                <div className="liBox">
                  <p className="price">￥{item.price}元</p>
                <p className="add">
                  <button onClick={() => changeNum(index, "send")}>-</button>
                  <span>{item.num}</span>
                  <button onClick={() => changeNum(index, "add")}>+</button>
                </p>
                </div>
                
              </div>
            </li>
          );
        })}
      </ul>
      <div className="bottom">
        <div>
          <input className="sp1" type="checkbox" checked={check} onChange={allChecked} />
          <span className="sp1">全选</span>
        </div>
        <div className="money div1">
          <p>合计</p>
          <p>以免运费</p>
        </div>
        <div className="money div2">
          <p>￥{price}</p>
          <p>已优惠￥200元</p>
        </div>
        <p className="sum">结算</p>
      </div>
    </div>
  );
}
